<template>
  <div class="min">
    <div class="header">
      <span class="tx"><img src="" alt=""></span><strong class="username">{{msg.username}}</strong>
    </div>
    <ul class="order">
      <li><div>&#xe735;</div>待付款</li>
      <li><div>&#xe66b;</div>待发货</li>
      <li><div>&#xe749;</div>待评价</li>
      <li><div>&#xe68e;</div>售后服务</li>
      <li><div>&#xe675;</div>所有订单</li>
    </ul>
    <ul class="orders">
      <li><div>0</div>优惠券</li>
      <li><div>20万</div>申请分期</li>
      <li><div>&#xe68e;</div>客服小姐姐</li>
      <li><div>0</div>关注的店铺</li>
    </ul>
    <mt-swipe :auto="4000" class="mysw">
      <mt-swipe-item class="slide1" v-for="sw in bannerImgs" :key="sw.id"><img :src="sw.imageUrl" :alt="sw.boardName" class="im"></mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters
  // mapActions
} from 'vuex'
export default {
  computed: {
    ...mapState([
      'msg'
    ]),
    ...mapGetters([
      'carlength',
      'islogin'
    ])
  },
  name: 'Mine',
  // data () {
  //   return {
  //     mines: []
  //   }
  // }
  data () {
    return {
      bannerImgs: []

    }
  },
  created () {
    this.$http.getHomeBanner()
      .then(res => {
        if (res.data.code === 200) {
          this.bannerImgs = res.data.data.banners
        }
      })
  }
}
</script>

<style scoped>

  .min{
    height: 100%;
    background: #ddd;
  }
  .header{
    width: 100%;
    height: 34vw;
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%;
    background: -webkit-linear-gradient(210deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(210deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(210deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(210deg,#ddf,#3f0f6f, #30cfd0); /* 标准的语法 */
  }
  .tx{
    display: inline-block;
    width: 20vw;
    height: 20vw;
    background: #ccc;
    border-radius: 10vw;
    margin-top: 7vw;
    margin-left: 8vw;
    float: left;
  }
  .username{
    display: inline-block;
    width: 50vw;
    height: 10vw;
    /* background: #0af; */
    margin-top: 12vw;
    margin-left: 4vw;
    text-align: center;
    line-height: 10vw;
    font-size: 20px;
    color: aqua
  }
  .order{
    background:#eff;
    height: 15vw;
    width: 97%;
    margin: 3vw auto;
    display: flex;
    justify-content: space-around;
    /* line-height: 15vw; */
    list-style: none;
    border-radius: 3vw;
    font-family: 'iconfont';
    font-size: 12px;
  }
  .orders{
    background:#eee;
    height: 50vw;
    width: 97%;
    margin: 3vw auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* line-height: 15vw; */
    list-style: none;
    border-radius: 3vw;
    font-family: 'iconfont';
    font-size: 13px;
  }
  .order>li{
    margin-top: 3vw;
  }
  .orders>li{
    /* margin-top: 3vw; */
    width: 46vw;
    height: 23vw;
    margin: 1vw;
    line-height: 10vw;
    text-align: center;
    background: #fff;
    border-radius: 3vw;
    /* background: #f00; */
  }
  .order>li>div{
    height:5vw;
    text-align: center;
    font-size: 16px;
  }
  .orders>li>div{
    margin: 3vw;
    height:5vw;
    text-align: center;
    font-size: 20px;
  }
   .mysw {
        height: 50vw;
        width: 97%;
        margin: 0 auto;
        border-radius: 3vw;
        color: red;
        font-size: 30px;
        text-align: center;
        /* margin-bottom: 20px; */
      }
      mint-swipe-item {
        line-height: 200px;
      }
      .slide1 {
        background-color: #0089dc;
        color: #fff;
      }
      .slide2 {
        background-color: #ffd705;
        color: #000;
      }
      .slide3 {
        background-color: #ff2d4b;
        color: #fff;
      }
      .im{
        width:100%;
        height: 200px;
      }
</style>
